You said:
I want to refactro this Drawer compaonent to be more readible and editable, break it up ino chunk if that is better:
// Drawer.js
import React, { useEffect, useState } from 'react';
import { styled, useTheme } from '@mui/material/styles';
import MuiDrawer from '@mui/material/Drawer';
import List from '@mui/material/List';
import Divider from '@mui/material/Divider';
import IconButton from '@mui/material/IconButton';
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
import ListItem from '@mui/material/ListItem';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemText from '@mui/material/ListItemText';
import Toolbar from '@mui/material/Toolbar';
import MainListItems from './../../listItems';
import Copyright from '../Copyright/Copyright';
import { useNavigate } from 'react-router-dom';
import { Avatar, Box, Collapse, Container, SwipeableDrawer, Tooltip, Typography, useMediaQuery } from '@mui/material';
import { navTabs } from '../objects';
import InsightsIcon from '@mui/icons-material/Insights';
import NetworkCheckIcon from '@mui/icons-material/NetworkCheck';
import ExpandLess from '@mui/icons-material/ExpandLess';
import ExpandMore from '@mui/icons-material/ExpandMore';
import People from '@mui/icons-material/People';
import { AdminPanelSettings, Campaign, Logout, OpenInNewOff, Settings, Dashboard } from '@mui/icons-material';
import { logout, reset } from '../../features/users/userSlice';
import { useDispatch, useSelector } from 'react-redux';
import UserOnboardingTour from '../../util/onboarding/tour';
import useCustomDispatch from '../Hooks/useCustomDispatch';
const drawerWidth = 240;
const openedMixin = (theme) => ({
width: drawerWidth,
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
overflowX: 'hidden',
});
const closedMixin = (theme) => ({
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
overflowX: 'hidden',
width:
calc(${theme.spacing(7)} + 1px),
[theme.breakpoints.up('md')]: {
width: calc(${theme.spacing(8)} + 1px),
},
});
const DrawerHeader = styled('div')(({ theme }) => ({
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
padding: theme.spacing(0, 1),
// necessary for content to be below app bar
...theme.mixins.toolbar,
}));
const StyledDrawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })(({ theme, open }) => ({
width: drawerWidth,
flexShrink: 0,
whiteSpace: 'nowrap',
boxSizing: 'border-box',
overflow: 'auto',
height: '100vh',
...(open && {
...openedMixin(theme),
'& .MuiDrawer-paper': {
...openedMixin(theme),
overflowY: 'auto',
height: '100%',
display: 'flex',
flexDirection: 'column',
},
}),
...(!open && {
...closedMixin(theme),
'& .MuiDrawer-paper': closedMixin(theme),
}),
}));
const Drawer = ({ open, setOpen }) => {
const { user, userIsOnboarded } = useSelector((state) => state.user);
const { admin } = useSelector((state) => state.auth);
const theme = useTheme();
const customDispatch = useCustomDispatch();
const navigate = useNavigate();
const [isClosing, setIsClosing] = useState(false);
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
const [openDropdown, setOpenDropdown] = useState(null);
const handleClickDropdown = () => {
setOpenDropdown(openDropdown === 'orgSettings' ? null : 'orgSettings');
};
const handleJAClickDropdown = () => {
setOpenDropdown(openDropdown === 'jaSuperAdmin' ? null : 'jaSuperAdmin');
};
const handleDrawerClose = () => {
setOpen(false);
setIsClosing(true);
};
const renderAdminSuperJAItems = () => {
return navTabs.adminSuperJA.map((tab, _index) => {
if (!admin?.email.includes('justair.co') && tab.label === 'Admins') return null;
const isInsights = tab.label.toLowerCase().includes('insights');
return (
<ListItem key={tab.label} disablePadding sx={{ display: 'block' }}>
<ListItemButton
sx={{
minHeight: 48,
justifyContent: open ? 'initial' : 'center',
px: 2.5,
}}
onClick={() => {
setOpen(false);
if (tab.path.includes('justair.co')) {
window.open('https://justair.co', '_blank'); // External navigation
} else {
navigate(${tab.path});
}
}}
>
<ListItemIcon
sx={{
mr: open ? 3 : 'auto',
justifyContent: 'center',
}}
>
<Tooltip title={tab.label} placement="right">
{tab.icon}
</Tooltip>
</ListItemIcon>
<ListItemText primary={tab.label} sx={{ opacity: open ? 1 : 0 }} />
</ListItemButton>
</ListItem>
);
});
};
const renderAdminSuperItems = () => {
return navTabs.adminSuper?.map((tab, _index) => (
<>
<ListItem key={tab.label} disablePadding sx={{ display: 'block' }}>
<ListItemButton
sx={{
minHeight: 48,
justifyContent: open ? 'initial' : 'center',
px: 2.5,
}}
onClick={() => {
setOpen(false);
if (tab.path.includes('justair.co')) {
window.open('https://justair.co', '_blank'); // External navigation
} else {
navigate(${tab.path});
}
}}
>
<ListItemIcon
sx={{
mr: open ? 3 : 'auto',
justifyContent: 'center',
}}
>
<Tooltip title={tab.label} placement="right">
{tab.icon}
</Tooltip>
</ListItemIcon>
<ListItemText primary={tab.label} sx={{ opacity: open ? 1 : 0 }} />
</ListItemButton>
</ListItem>
</>
));
};
const renderAdminItems = () => {
return navTabs.admin?.map((tab, _index) => (
<>
<ListItem key={tab.label} disablePadding sx={{ display: 'block' }}>
<ListItemButton
sx={{
minHeight: 48,
justifyContent: open ? 'initial' : 'center',
px: 2.5,
}}
onClick={() => {
setOpen(false);
if (tab.path.includes('justair.co')) {
window.open('https://justair.co', '_blank'); // External navigation
} else {
navigate(${tab.path});
}
}}
>
<ListItemIcon
sx={{
mr: open ? 3 : 'auto',
justifyContent: 'center',
}}
>
<Tooltip title={tab.label} placement="right">
{tab.icon}
</Tooltip>
</ListItemIcon>
<ListItemText primary={tab.label} sx={{ opacity: open ? 1 : 0 }} />
</ListItemButton>
</ListItem>
</>
));
};
const renderMemberItems = () => {
return navTabs.member?.map((tab, _index) => (
<>
<ListItem key={tab.label} disablePadding sx={{ display: 'block' }}>
<ListItemButton
sx={{
minHeight: 48,
justifyContent: open ? 'initial' : 'center',
px: 2.5,
}}
onClick={() => {
setOpen(false);
if (tab.path.includes('justair.co')) {
window.open('https://justair.co', '_blank'); // External navigation
} else {
navigate(${tab.path});
}
}}
>
<ListItemIcon
sx={{
mr: open ? 3 : 'auto',
justifyContent: 'center',
}}
>
<Tooltip title={tab.label} placement="right">
{tab.icon}
</Tooltip>
</ListItemIcon>
<ListItemText primary={tab.label} sx={{ opacity: open ? 1 : 0 }} />
</ListItemButton>
</ListItem>
</>
));
};
if (admin) {
return isMobile ? (
<SwipeableDrawer
onClose={() => {
setOpen(false);
}}
// variant="temporary"
open={open}
>
<DrawerHeader sx={{ width: drawerWidth }}>
<IconButton onClick={handleDrawerClose}>
{theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
</IconButton>
</DrawerHeader>
<Divider />
<List>
{navTabs.adminSuper.map((tab, _index) => {
if (!admin.email.includes('justair.co') && tab.label === 'Admins') return null;
return (
<ListItem key={tab.label} disablePadding sx={{ display: 'block' }}>
<ListItemButton
sx={{
minHeight: 48,
justifyContent: open ? 'initial' : 'center',
px: 2.5,
}}
onClick={() => {
setOpen(false);
if (tab.path.includes('justair.co')) {
window.open('https://justair.co', '_blank'); // External navigation
} else {
navigate(${tab.path});
}
}}
>
<ListItemIcon
sx={{
minWidth: 0,
mr: open ? 3 : 'auto',
justifyContent: 'center',
}}
>
<Tooltip title={tab.label} placement="right">
{tab.icon}
</Tooltip>
</ListItemIcon>
<ListItemText primary={tab.label} sx={{ opacity: open ? 1 : 0 }} />
</ListItemButton>
</ListItem>
);
})}
<Divider />
{console.log(admin)}
{admin?.orgInformation?.id && admin.permissionName === 'Super Admin' && (
<ListItem key={'org-dropdown'} disablePadding sx={{ display: 'block' }}>
<ListItemButton
sx={{
minHeight: 48,
justifyContent: open ? 'space-between' : 'center',
alignItems: 'center',
px: 2.5,
pr: open ? 4 : 2.5,
}}
onClick={handleClickDropdown}
>
{/* <Box sx={{ display: 'flex', alignItems: 'center' }}> */}
<ListItemIcon
sx={{
mr: open ? 3 : 'auto',
justifyContent: 'center',
}}
>
<Tooltip title="Admin Orgs" placement="right">
<People />
</Tooltip>
</ListItemIcon>
<ListItemText primary="Org Settings" sx={{ opacity: open ? 1 : 0 }} />
{/* </Box> */}
{open && <Box sx={{ ml: 2 }}>{openDropdown === 'orgSettings' ? <ExpandLess /> : <ExpandMore />}</Box>}
</ListItemButton>
</ListItem>
)}
</List>
{admin?.orgInformation?.id && admin.permissionName === 'Super Admin' && (
<Collapse in={openDropdown === 'orgSettings'} timeout="auto" unmountOnExit>
<List component="div" disablePadding>
{navTabs.adminOrg.drawer.map((tab, index) => (
<ListItemButton
key={tab.label}
sx={{
minHeight: 48,
justifyContent: open ? 'initial' : 'center',
px: 2.5,
}}
onClick={() => {
setOpen(false);
if (tab.path.includes('justair.co')) {
window.open('https://justair.co', '_blank'); // External navigation
} else {
navigate(${tab.path});
}
}}
>
<ListItemIcon
sx={{
mr: open ? 3 : 'auto',
justifyContent: 'center',
}}
>
<Tooltip title={tab.label} placement="right">
{tab.icon}
</Tooltip>
</ListItemIcon>
<ListItemText primary={tab.label} />
</ListItemButton>
))}
</List>
</Collapse>
)}
<Divider />
{admin && admin.permissionName === 'Super Admin' && admin.email.includes('justair.co') && (
<ListItem key={'org-dropdown'} disablePadding sx={{ display: 'block' }}>
<ListItemButton
sx={{
minHeight: 48,
justifyContent: open ? 'space-between' : 'center',
alignItems: 'center',
px: 2.5,
pr: open ? 4 : 2.5,
}}
onClick={handleJAClickDropdown}
>
<ListItemIcon
sx={{
mr: open ? 3 : 'auto',
justifyContent: 'center',
}}
>
<Tooltip title="JA Super Admin" placement="right">
<AdminPanelSettings />
</Tooltip>
</ListItemIcon>
<ListItemText primary="JA Super Admin" sx={{ opacity: open ? 1 : 0 }} />
{open && <Box sx={{ ml: 2 }}>{openDropdown === 'jaSuperAdmin' ? <ExpandLess /> : <ExpandMore />}</Box>}
</ListItemButton>
</ListItem>
)}
{admin && admin.permissionName === 'Super Admin' && admin.email.includes('justair.co') && (
<Collapse in={openDropdown === 'jaSuperAdmin'} timeout="auto" unmountOnExit>
<List component="div" disablePadding>
<ListItem disablePadding sx={{ display: 'block' }}>
<ListItemButton
sx={{
minHeight: 48,
justifyContent: open ? 'initial' : 'center',
px: 2.5,
}}
onClick={() => navigate(/admin-super/create-organization)}
>
<ListItemIcon
sx={{
mr: open ? 3 : 'auto',
justifyContent: 'center',
}}
>
<Tooltip title={'Create Org'} placement="right">
<Settings />
</Tooltip>
</ListItemIcon>
<ListItemText primary={'Create Org'} sx={{ opacity: open ? 1 : 0 }} />
</ListItemButton>
</ListItem>
<ListItem disablePadding sx={{ display: 'block' }}>
<ListItemButton
sx={{
minHeight: 48,
justifyContent: open ? 'initial' : 'center',
px: 2.5,
}}
onClick={() => navigate(/admin-super/config-dashboard)}
>
<ListItemIcon
sx={{
mr: open ? 3 : 'auto',
justifyContent: 'center',
}}
>
<Tooltip title={'Configs'} placement="right">
<Settings />
</Tooltip>
</ListItemIcon>
<ListItemText primary={'Configs'} sx={{ opacity: open ? 1 : 0 }} />
</ListItemButton>
</ListItem>
</List>
</Collapse>
)}
{/* {open && <Copyright sx={{ position: 'fixed', bottom: 0, left: 0, right: 0 }} />} */}
</SwipeableDrawer>
) : (
<StyledDrawer variant="permanent" open={open} sx={{}}>
<DrawerHeader>
<IconButton onClick={handleDrawerClose}>
{theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
</IconButton>
</DrawerHeader>
<Divider />
<Box sx={{ height: '100%' }}>
<List>
{admin?.permissionName === 'Super Admin' &&
admin?.email.includes('justair.co') &&
renderAdminSuperJAItems()}
{admin?.permissionName === 'Super Admin' && !admin?.email.includes('justair.co') && renderAdminSuperItems()}
{admin?.permissionName === 'Admin' && renderAdminItems()}
{admin?.permissionName === 'Member' && renderMemberItems()}
{admin.orgInformation.name !== 'Quandary Consultants' && (
<ListItem disablePadding sx={{ display: 'block' }}>
<ListItemButton
sx={{
minHeight: 48,
justifyContent: open ? 'initial' : 'center',
px: 2.5,
}}
onClick={() => {
setOpen(false);
navigate('/admin/network-insights');
}}
>
<ListItemIcon
sx={{
mr: open ? 3 : 'auto',
justifyContent: 'center',
}}
>
<Tooltip title={'Network Insights'} placement="right">
<NetworkCheckIcon />
</Tooltip>
</ListItemIcon>
<ListItemText primary={'Network Insights'} sx={{ opacity: open ? 1 : 0 }} />
</ListItemButton>
</ListItem>
)}
{admin.orgInformation.name === 'Quandary Consultants' && (
<ListItem disablePadding sx={{ display: 'block' }}>
<ListItemButton
sx={{
minHeight: 48,
justifyContent: open ? 'initial' : 'center',
px: 2.5,
}}
onClick={() => {
setOpen(false);
navigate(/admin/insights);
}}
>
<ListItemIcon
sx={{
mr: open ? 3 : 'auto',
justifyContent: 'center',
}}
>
<Tooltip title={'Insights'} placement="right">
<InsightsIcon />
</Tooltip>
</ListItemIcon>
<ListItemText primary={'Insights'} sx={{ opacity: open ? 1 : 0 }} />
</ListItemButton>
</ListItem>
)}
<Divider />
{admin?.orgInformation?.id && admin.permissionName === 'Super Admin' && (
<ListItem key={'org-dropdown'} disablePadding sx={{ display: 'block' }}>
<ListItemButton
sx={{
minHeight: 48,
justifyContent: open ? 'space-between' : 'center',
alignItems: 'center',
px: 2.5,
pr: open ? 4 : 2.5,
}}
onClick={handleClickDropdown}
>
{/* <Box sx={{ display: 'flex', alignItems: 'center' }}> */}
<ListItemIcon
sx={{
mr: open ? 3 : 'auto',
justifyContent: 'center',
}}
>
<Tooltip title="Admin Orgs" placement="right">
<People />
</Tooltip>
</ListItemIcon>
<ListItemText primary="Org Settings" sx={{ opacity: open ? 1 : 0 }} />
{/* </Box> */}
{open && <Box sx={{ ml: 2 }}>{openDropdown === 'orgSettings' ? <ExpandLess /> : <ExpandMore />}</Box>}
</ListItemButton>
</ListItem>
)}
</List>
{admin?.orgInformation?.id && admin.permissionName === 'Super Admin' && (
<Collapse in={openDropdown === 'orgSettings'} timeout="auto" unmountOnExit>
<List component="div" disablePadding>
{navTabs.adminOrg.drawer.map((tab, index) => (
<ListItemButton
key={tab.label}
sx={{
minHeight: 48,
justifyContent: open ? 'initial' : 'center',
px: 2.5,
}}
onClick={() => {
setOpen(false);
if (tab.path.includes('justair.co')) {
window.open('https://justair.co', '_blank'); // External navigation
} else {
navigate(${tab.path});
}
}}
>
<ListItemIcon
sx={{
mr: open ? 3 : 'auto',
justifyContent: 'center',
}}
>
<Tooltip title={tab.label} placement="right">
{tab.icon}
</Tooltip>
</ListItemIcon>
<ListItemText primary={tab.label} />
</ListItemButton>
))}
</List>
</Collapse>
)}
<Divider />
{admin && admin.permissionName === 'Super Admin' && admin.email.includes('justair.co') && (
<ListItem key={'org-dropdown'} disablePadding sx={{ display: 'block' }}>
<ListItemButton
sx={{
minHeight: 48,
justifyContent: open ? 'space-between' : 'center',
alignItems: 'center',
px: 2.5,
pr: open ? 4 : 2.5,
}}
onClick={handleJAClickDropdown}
>
<ListItemIcon
sx={{
mr: open ? 3 : 'auto',
justifyContent: 'center',
}}
>
<Tooltip title="JA Super Admin" placement="right">
<AdminPanelSettings />
</Tooltip>
</ListItemIcon>
<ListItemText primary="JA Super Admin" sx={{ opacity: open ? 1 : 0 }} />
{open && <Box sx={{ ml: 2 }}>{openDropdown === 'jaSuperAdmin' ? <ExpandLess /> : <ExpandMore />}</Box>}
</ListItemButton>
</ListItem>
)}
{admin && admin.permissionName === 'Super Admin' && admin.email.includes('justair.co') && (
<Collapse in={openDropdown === 'jaSuperAdmin'} timeout="auto" unmountOnExit>
<List component="div" disablePadding>
<ListItem disablePadding sx={{ display: 'block' }}>
<ListItemButton
sx={{
minHeight: 48,
justifyContent: open ? 'initial' : 'center',
px: 2.5,
}}
onClick={() => navigate(/admin-super/announcements/dashboard)}
>
<ListItemIcon
sx={{
mr: open ? 3 : 'auto',
justifyContent: 'center',
}}
>
<Tooltip title={'Alerts'} placement="right">
<Campaign />
</Tooltip>
</ListItemIcon>
<ListItemText primary={'Alerts'} sx={{ opacity: open ? 1 : 0 }} />
</ListItemButton>
</ListItem>
<ListItem disablePadding sx={{ display: 'block' }}>
<ListItemButton
sx={{
minHeight: 48,
justifyContent: open ? 'initial' : 'center',
px: 2.5,
}}
onClick={() => navigate(/admin-super/create-organization)}
>
<ListItemIcon
sx={{
mr: open ? 3 : 'auto',
justifyContent: 'center',
}}
>
<Tooltip title={'Create Org'} placement="right">
<Settings />
</Tooltip>
</ListItemIcon>
<ListItemText primary={'Create Org'} sx={{ opacity: open ? 1 : 0 }} />
</ListItemButton>
</ListItem>
<ListItem disablePadding sx={{ display: 'block' }}>
<ListItemButton
sx={{
minHeight: 48,
justifyContent: open ? 'initial' : 'center',
px: 2.5,
}}
onClick={() => navigate(/admin-super/config-dashboard)}
>
<ListItemIcon
sx={{
mr: open ? 3 : 'auto',
justifyContent: 'center',
}}
>
<Tooltip title={'Configs'} placement="right">
<Settings />
</Tooltip>
</ListItemIcon>
<ListItemText primary={'Configs'} sx={{ opacity: open ? 1 : 0 }} />
</ListItemButton>
</ListItem>
<ListItem disablePadding sx={{ display: 'block' }}>
<ListItemButton
sx={{
minHeight: 48,
justifyContent: open ? 'initial' : 'center',
px: 2.5,
}}
onClick={() => navigate(/admin-super/qa-dashboard)}
>
<ListItemIcon
sx={{
mr: open ? 3 : 'auto',
justifyContent: 'center',
}}
>
<Tooltip title={'QA Dashboard'} placement="right">
<Dashboard />
</Tooltip>
</ListItemIcon>
<ListItemText primary={'QA Dashboard'} sx={{ opacity: open ? 1 : 0 }} />
</ListItemButton>
</ListItem>
</List>
</Collapse>
)}
</Box>
{/* {open && <Copyright sx={{ position: 'fixed', bottom: 0, left: 0,}} />} */}
</StyledDrawer>
);
} else if (user) {
return (
<SwipeableDrawer
onClose={() => {
setOpen(false);
}}
// variant="temporary"
open={open}
>
<Toolbar
sx={{
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
px: 1,
width: drawerWidth,
}}
>
<UserOnboardingTour user={user} isDrawerOpen={open} setDrawerOpen={setOpen} />
<IconButton onClick={handleDrawerClose}>
<ChevronLeftIcon />
</IconButton>
</Toolbar>
<DrawerHeader sx={{ height: 125 }}>
<Container
onClick={() => navigate('/')}
sx={{ height: '100%', pt: 3, display: 'flex', justifyContent: 'center' }}
>
<Avatar {...stringAvatar(user?.name || 'Just Air')} />
</Container>
</DrawerHeader>
<Divider />
<List>
{!user.hasOnboarded && (
<ListItem
onClick={() => {
navigate('/user/onboarding');
}}
key={'onboard-user'}
disablePadding
sx={{ display: 'block' }}
>
<ListItemButton
sx={{
minHeight: 48,
justifyContent: open ? 'initial' : 'center',
px: 2.5,
color: (theme) => theme.palette.blue.dark,
}}
>
<ListItemIcon
sx={{
mr: open ? 3 : 'auto',
justifyContent: 'center',
color: (theme) => theme.palette.blue.dark,
}}
button
>
<Tooltip title={'Finish Onboarding'} placement="right">
<OpenInNewOff />
</Tooltip>
</ListItemIcon>
<ListItemText
sx={{ color: (theme) => theme.palette.blue.dark }}
component="a"
primary="Finish Onboarding"
/>
</ListItemButton>
</ListItem>
)}
{navTabs.userNav.map((tab, _index) => {
return (
<ListItem data-onboarding={_index + 1} key={tab.label} disablePadding sx={{ display: 'block' }}>
<ListItemButton
sx={{
minHeight: 48,
justifyContent: open ? 'initial' : 'center',
px: 2.5,
color: (theme) => theme.palette.blue.dark,
}}
onClick={() => {
setOpen(false);
if (tab.path.includes('justair.co')) {
window.open('https://justair.co', '_blank'); // External navigation
} else {
navigate(tab.path);
}
}}
>
<ListItemIcon
sx={{
mr: open ? 3 : 'auto',
justifyContent: 'center',
color: (theme) => theme.palette.blue.dark,
}}
>
<Tooltip title={tab.label} placement="right">
{tab.icon}
</Tooltip>
</ListItemIcon>
<ListItemText primary={tab.label} color="primary" sx={{ opacity: open ? 1 : 0 }} />
</ListItemButton>
</ListItem>
);
})}
<ListItem
onClick={() => {
customDispatch(logout());
customDispatch(reset());
navigate('/');
}}
key={'logout'}
disablePadding
sx={{ display: 'block' }}
>
<ListItemButton
sx={{
minHeight: 48,
justifyContent: open ? 'initial' : 'center',
px: 2.5,
color: (theme) => theme.palette.blue.dark,
}}
>
<ListItemIcon
sx={{
mr: open ? 3 : 'auto',
justifyContent: 'center',
color: (theme) => theme.palette.blue.dark,
}}
button
>
<Tooltip title={'Logout'} placement="right">
<Logout />
</Tooltip>
</ListItemIcon>
<ListItemText sx={{ color: (theme) => theme.palette.blue.dark }} component="a" primary="Logout" />
</ListItemButton>
</ListItem>
</List>
{open && <Copyright sx={{ position: 'fixed', bottom: 0, left: 5 }} />}
</SwipeableDrawer>
);
} else {
return (
<SwipeableDrawer
onClose={() => {
setOpen(false);
}}
// variant="temporary"
open={open}
>
<Toolbar
sx={{
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
px: [1],
width: drawerWidth,
}}
>
<IconButton onClick={handleDrawerClose}>
<ChevronLeftIcon />
</IconButton>
</Toolbar>
<Divider />
<List>
<MainListItems user={user} handleDrawerClose={handleDrawerClose} />
</List>
<Divider />
{open && <Copyright sx={{ position: 'fixed', bottom: 0, left: 2 }} />}
</SwipeableDrawer>
);
}
};
export default Drawer;
const colorPalette = {
blue: '#29ABE2',
yellow: '#e4af60',
green: '#8CC63F',
teal: '#22b573',
};
export function stringAvatar(name) {
return {
sx: {
bgcolor: name === 'Just Air' ? colorPalette.blue : colorPalette.yellow,
height: 100,
width: 100,
fontSize: 45,
},
children: ${name?.split(' ')[0] ? name?.split(' ')[0][0] : ''}${
name?.split(' ')[1] ? name?.split(' ')[1][0] : ''
},
};
}